<template>
  <div class="w-100 h-100 flex Boty">
    <div class="head-one">
      <div ref="inHeight" class="h-100 w-98 mauto">
        <div class="w-100 ws flexLeft Text">检索参数</div>
        <div ref="hadd">
          <div class="head-header">
            <div class="Size head-header-one">投诉订单:</div>
            <div class="h-100 head-header-one-1">
              <el-input
                v-model="from.name"
                class="ipLink"
                placeholder="请输入投诉订单"
                size="mini"
              ></el-input>
            </div>
          </div>
          <div class="head-header">
            <div class="Size head-header-one">投诉时间:</div>
            <div class="h-100 head-header-one-1">
              <el-date-picker
                v-model="from.val"
                end-placeholder="结束日期"
                range-separator="至"
                size="mini"
                start-placeholder="开始日期"
                style="width: 350px"
                type="daterange"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="head-header">
            <div class="Size head-header-one">状态:</div>
            <div class="h-100 head-header-one-1">
              <el-select
                v-model="from.value"
                class="ipLink"
                placeholder="请选择状态"
                size="mini"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="head-header">
            <el-button size="mini" style="margin-left: 20px" type="primary"
              >查询
            </el-button>
            <el-button size="mini">重置</el-button>
          </div>
        </div>
        <!-- table页面-->
        <div class="w-100">
          <div class="w-100 ws flexLeft c-title">
            注：请及时处理投诉！自动关停条件：1、累计超过20条未处理；2、最长超过5天未处理
          </div>
          <div ref="Hend">
            <el-table
              :data="tableData"
              :header-cell-style="{ background: '#F5F5F5', color: '#555555' }"
              :height="Hen - 50"
              :style="{ width: Mokhe + 'px' }"
              border
              stripe
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="50"></el-table-column>
              <el-table-column align="center" label="投诉来源" width="150">
              </el-table-column>
              <el-table-column
                align="center"
                label="投诉订单号(平台订单号)"
                width="250"
              >
              </el-table-column>
              <el-table-column align="center" label="投诉内容" width="250">
              </el-table-column>
              <el-table-column align="center" label="投诉时间" width="150">
              </el-table-column>
              <el-table-column
                align="center"
                label="投诉类型"
                width="150"
              ></el-table-column>
              <el-table-column
                align="center"
                label="投诉等级"
                width="150"
              ></el-table-column>
              <el-table-column
                align="center"
                label="手机号"
                width="150"
              ></el-table-column>
              <el-table-column
                align="center"
                label="金额"
                width="150"
              ></el-table-column>
              <el-table-column
                align="center"
                label="退款状态"
                width="150"
              ></el-table-column>
              <el-table-column
                align="center"
                label="处理状态"
                width="150"
              ></el-table-column>
              <el-table-column
                align="center"
                label="支付宝状态"
                width="150"
              ></el-table-column>
              <el-table-column
                align="center"
                label="操作"
                width="150"
              ></el-table-column>
              <div slot="empty" class="empty">
                <el-empty description="暂无数据"></el-empty>
              </div>
            </el-table>
          </div>
        </div>
        <!-- 底部分页-->
        <div class="w-100 ws flexRight">
          <el-pagination
            :current-page.sync="pageIndex"
            :page-size="pageSize"
            :total="1000"
            background
            layout="total, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      Hen: 0,
      Mokhe: 0,
      tableData: [],
      multipleSelection: [],
      options: [],
      list: [],
      pageIndex: 1,
      pageSize: 20,
      from: {
        name: "",
        val: "",
        value: "",
      },
    };
  },
  mounted() {
    this.getHeight();
    window.addEventListener("resize", this.getHeight);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.getHeight);
  },
  methods: {
    getHeight() {
      this.Hen =
        this.$refs.inHeight.clientHeight - (this.$refs.hadd.clientHeight + 100);
      this.Mokhe = this.$refs.Hend.clientWidth;
    },
    handleSizeChange(val) {
      console.log(val);
    },
    handleCurrentChange(val) {
      console.log(val);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style scoped>
.Boty {
  background: #eeeeee;
}

.head-one {
  background: #ffffff;
  height: 97%;
  width: 98%;
}

.Text {
  font-size: 14px;
  font-weight: bold;
}

.Size {
  font-size: 15px;
  width: 85px;
  height: 100%;
  display: inline-block;
}

.head-header {
  height: 40px;
  display: inline-block;
}

.head-header-one {
  line-height: 40px;
  text-align: center;
}

.head-header-one-1 {
  display: inline-block;
  line-height: 40px;
}

.ipLink {
  width: 160px;
}

.c-title {
  font-size: 14px;
  font-weight: bold;
}

.Color {
  color: red;
}
</style>
